import './App.css';

//rcc 生成类组件
//rsf 生成函数式组件
import React, { Component, lazy, Suspense } from 'react';

import { Redirect, Route, Switch } from 'react-router-dom';
//懒加载
const Index = lazy(() => import('./views/Index'))
const Login = lazy(() => import('./views/Login'))
const Register = lazy(() => import('./views/Register'))
const Register2 = lazy(() => import('./views/Register2'))
const Register3 = lazy(() => import('./views/Register3'))
const City = lazy(() => import('./views/City'))
const Detail = lazy(() => import('./views/Detail'))
const Search = lazy(() => import('./views/Search'))
const Search_xiang = lazy(() => import('./views/Search_xiang'))
const AddAddress = lazy(() => import('./views/AddAddress'))
const Address = lazy(() => import('./views/Address'))
const Gai_address = lazy(() => import('./views/Gai_address'))
const Sure_order = lazy(() => import('./views/Sure_order'))
const View_orders = lazy(() => import('./views/View_orders'))
const Shezhi = lazy(() => import('./views/Shezhi'))
const we = lazy(() => import('./views/We'))
const NotFound = lazy(() => import('./views/NotFound'))
const shoucang = lazy(() => import('./views/Shoucang'))
const jianyi  = lazy(() => import('./views/jianyi'))




class App extends Component {
  render() {
    
    return (
      <div className='app'>

        {/* 路由组件 */}

        <Suspense fallback={'加载中...'}>
          {/*this.props.children用来保存父组件在渲染子组件是通过子组件内容区传入的数据/组件*/}
          {/* {this.props.children} */}
          {/* Switch默认匹配当前项，刷新不会重定向 */}
          <Switch>
            <Route path="/index" component={Index} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/register2" component={Register2} />
            <Route exact path="/register3" component={Register3} />
            <Route exact path="/city" component={City} />
            <Route exact path="/detail" component={Detail} />
            <Route exact path="/search" component={Search} />
            <Route exact path="/search_xiang" component={Search_xiang} />
            <Route exact path="/addaddress" component={AddAddress} />
            <Route exact path="/address" component={Address} />
            <Route exact path="/gai_address" component={Gai_address} />
            <Route exact path="/sure_order" component={Sure_order} />
            <Route exact path="/view_orders" component={View_orders} />
            <Route exact path="/shezhi" component={Shezhi} />
            <Route exact path="/shoucang" component={shoucang} />
            <Route exact path="/we" component={we} />
            <Route exact path="/jianyi" component={jianyi} />




            {/* 路由重定向 exact精准匹配 */}
            <Redirect from='/' to="index" exact />

            {/* 404 */}
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>

      </div>
    );
  }
}

export default App